<template>
  <div class="order-container">
    <div class="order-header-box">
      <div class="item" :class="{ active: index == typeIndex }" v-for="(item, index) in orderType" :key="index"
        @click="handleClickType(index)">
        {{ item }}
      </div>
    </div>

    <div class="my-order-list">
      <Filter :tabList="filterList" v-if="typeIndex == 0" @onChange="getTabs"></Filter>
      <CommerFilter :tabList="commerList" v-if="typeIndex == 1" @onChange="getCommerTabs"></CommerFilter>

      <div class="flex-container" v-if="typeIndex == 0">
        <scroll-view :scroll-y="true" v-if="list.length" scrollAnchoring class="scroll-list"
          @scrolltolower="onScrollBottom">
          <div class="flex-item" v-for="(items, index) in list" :key="index">
            <orderItem :info="items" @onupdated="getNewList"></orderItem>
          </div>
          <Loading :page="info.currentPage" :total="totalPage" :loadingFlag="loadingFlag" :tipFlag="tipFlag">
          </Loading>
        </scroll-view>

        <template v-if="list.length === 0 && !loading">
          <nut-empty description="无数据"></nut-empty>
        </template>
        <!-- 加载状态 -->
        <template v-if="list.length === 0 && loading">
          <nut-skeleton :style="{ width: '100%', margin: '0.5rem 0.5rem' }" width="100%" height="15px" title animated
            row="3">
          </nut-skeleton>
          <nut-skeleton :style="{ width: '100%', margin: '0.5rem 0.5rem' }" width="100%" height="15px" title animated
            row="3">
          </nut-skeleton>
          <nut-skeleton :style="{ width: '100%', margin: '0.5rem 0.5rem' }" width="100%" height="15px" title animated
            row="3">
          </nut-skeleton>
          <nut-skeleton :style="{ width: '100%', margin: '0.5rem 0.5rem' }" width="100%" height="15px" title animated
            row="3">
          </nut-skeleton>
          <nut-skeleton :style="{ width: '100%', margin: '0.5rem 0.5rem' }" width="100%" height="15px" title animated
            row="3">
          </nut-skeleton>
          <nut-skeleton :style="{ width: '100%', margin: '0.5rem 0.5rem' }" width="100%" height="15px" title animated
            row="3">
          </nut-skeleton>
          <nut-skeleton :style="{ width: '100%', margin: '0.5rem 0.5rem' }" width="100%" height="15px" title animated
            row="3">
          </nut-skeleton>
        </template>
      </div>
      <div class="flex-container" v-else>
        <scroll-view :scroll-y="true" v-if="commerceList.length" scrollAnchoring class="scroll-list"
          @scrolltolower="onScrollBottom1">
          <div class="flex-item" v-for="(items, index) in commerceList" :key="index">
            <commerceOrder :info="items" @onUpdated="getNewList1">
            </commerceOrder>
          </div>
          <Loading :page="commerInfo.currentPage" :total="totalPage" :loadingFlag="loadingFlag" :tipFlag="tipFlag">
          </Loading>
        </scroll-view>

        <template v-if="commerceList.length === 0 && !loading">
          <nut-empty description="无数据"></nut-empty>
        </template>
        <!-- 加载状态 -->
        <template v-if="commerceList.length === 0 && loading">
          <nut-skeleton :style="{ width: '100%', margin: '0.5rem 0.5rem' }" width="100%" height="15px" title animated
            row="3">
          </nut-skeleton>
          <nut-skeleton :style="{ width: '100%', margin: '0.5rem 0.5rem' }" width="100%" height="15px" title animated
            row="3">
          </nut-skeleton>
          <nut-skeleton :style="{ width: '100%', margin: '0.5rem 0.5rem' }" width="100%" height="15px" title animated
            row="3">
          </nut-skeleton>
          <nut-skeleton :style="{ width: '100%', margin: '0.5rem 0.5rem' }" width="100%" height="15px" title animated
            row="3">
          </nut-skeleton>
          <nut-skeleton :style="{ width: '100%', margin: '0.5rem 0.5rem' }" width="100%" height="15px" title animated
            row="3">
          </nut-skeleton>
          <nut-skeleton :style="{ width: '100%', margin: '0.5rem 0.5rem' }" width="100%" height="15px" title animated
            row="3">
          </nut-skeleton>
          <nut-skeleton :style="{ width: '100%', margin: '0.5rem 0.5rem' }" width="100%" height="15px" title animated
            row="3">
          </nut-skeleton>
        </template>
      </div>
    </div>
  </div>
  <Tabbar></Tabbar>
</template>
<script setup>
import Filter from "./components/filter";
import CommerFilter from './components/commer-filter.vue'
import Tabbar from "../../component/Tabbar";
import { onMounted } from "vue";
import { storeToRefs } from "pinia";
import Taro, { useDidShow } from "@tarojs/taro";
import { useTabbarStore } from "../../store";
import { useUserStore } from "../../store";
import * as orderApi from "../../api/order";
import * as loginApi from "../../api/loginApi";
import orderItem from "./components/orderItem/index.vue";
import commerceOrder from "./components/commerceItem/index.vue"
import Loading from "../../component/Loading/index";

import { ref } from "vue";
const tabbarStore = useTabbarStore();
const router = Taro.useRouter();
const userStore = useUserStore();
const { Token, Userinfo } = storeToRefs(userStore);
const isShow = ref(true);

const { selected, tabbarHeight } = storeToRefs(tabbarStore);

const orderType = ref(["影票订单", "分销订单"]);
const filterList = ref([
  {
    id: 1,
    name: "待支付",
  },
  {
    id: 4,
    name: "待出票",
  },
  {
    id: 5,
    name: "已出票",
  },
  {
    id: 6,
    name: "已收货",
  },
  {
    id: 12,
    name: "已退票",
  },
]);
const commerList = ref([
  {
    id: 1,
    name: "待支付",
  },
  {
    id: 2,
    name: "待发货",
  },
  {
    id: 3,
    name: "已发货",
  },
  {
    id: 4,
    name: "已结算",
  },
  {
    id: 20,
    name: "已取消",
  },
])
//订单请求参数
const info = ref({
  orderStatus: filterList.value[0].id, //订单状态
  pageSize: 5, // 数量
  currentPage: 1, // 当前页码
  userId: Userinfo.value.id, // 用户ID
});
const isSelected = ref(0); //当前选中的订单状态
const loading = ref(false); // 加载状态
const totalPage = ref(0); //总页数
const loadingFlag = ref(false);
const tipFlag = ref(false); // 加载的提示
const listContainerHeight = ref(0); // 滑动框高度
const timer = ref(null); // 定时器
const userInfo = ref({}); // 用户信息
const list = ref([]);
const typeIndex = ref(1);

const commerceList = ref([])
// 电商订单相关的数据
const commerInfo = ref({
  orderStatus: commerList.value[0].id, //订单状态
  pageSize: 5, // 数量
  currentPage: 1, // 当前页码
})
//每次进入我的页面都刷新用户信息 并且保存
useDidShow(() => {
  // getListContainerHeight();

  setTimeout(() => {
    getUserInfo();
  }, 1000);
});
const getTabs = (val) => {
  info.value.currentPage = 1;
  loading.value = true;
  info.value.orderStatus = val.id;
  getList(0);
};
// 获取 Tabs 
const getCommerTabs = (val) => {
  commerInfo.value.currentPage = 1;
  loading.value = true;
  commerInfo.value.orderStatus = val.id;
  getCommerList(0);

}
//调用用户信息接口
const getUserInfo = async () => {
  const res = await loginApi
    .userInfo({ userId: Userinfo.value.id })
    .then((res) => res.data);
  userStore.setUserinfo(res);
  Taro.setStorageSync("userInfo", res);
};
const handleClickType = (index) => {
  typeIndex.value = index;
  if (index == 0) {
    info.value.currentPage = 1;
    info.value.orderStatus = filterList.value[0].id;


    getList(0);

  } else {
    commerInfo.value.currentPage = 1;
    commerInfo.value.currentPage = commerInfo.value[0].id;

    getCommerList(0);
  }
};
// 更新列表 子组件函数
const getNewList = () => {
  info.value.currentPage = 1;
  getList(0);
};
// 更新列表 子组件函数
const getNewList1 = () => {
  commerInfo.value.currentPage = 1;
  getCommerList(0);
};
//分页节流
const throttle = (func, delay) => {
  let lastTime = 0;
  return function () {
    const now = new Date().getTime();
    if (now - lastTime >= delay) {
      func.apply(this, arguments);
      lastTime = now;
    }
  };
};

const onScrollBottom = throttle(() => {
  loadingFlag.value = true;
  tipFlag.value = false;
  if (info.value.currentPage < totalPage.value) {
    info.value.currentPage++;
    getList(1);
  } else {
    loadingFlag.value = false;
    tipFlag.value = true;
  }
}, 1000);
// 在绑定滚动事件时使用 onScrollBottom
window.addEventListener("scroll", onScrollBottom);

const onScrollBottom1 = throttle(() => {
  loadingFlag.value = true;
  tipFlag.value = false;
  if (commerInfo.value.currentPage < totalPage.value) {
    commerInfo.value.currentPage++;
    getCommerList(1);
  } else {
    loadingFlag.value = false;
    tipFlag.value = true;
  }
}, 1000);
// 在绑定滚动事件时使用 onScrollBottom
window.addEventListener("scroll", onScrollBottom1);
//获取当前的列表
const getList = async (status) => {
  const res = await orderApi.orderList(info.value);
  if (res.state == 200) {
    if (status) {
      totalPage.value = res.data.pageCount;
      list.value = [...list.value, ...res.data.list];
      loading.value = false;
      loadingFlag.value = false;
    } else {
      totalPage.value = res.data.pageCount;
      list.value = [];
      list.value = res.data.list;
      loading.value = false;
      loadingFlag.value = false;
    }
  }
};
//获取当前的列表
const getCommerList = async (status) => {
  const res = await orderApi.OrderCommerList(commerInfo.value);
  if (res.state == 200) {
    if (status) {
      totalPage.value = res.data.pageCount;
      commerceList.value = [...commerceList.value, ...res.data.list];
      loading.value = false;
      loadingFlag.value = false;
    } else {
      totalPage.value = res.data.pageCount;
      commerceList.value = [];
      commerceList.value = res.data.list;
      loading.value = false;
      loadingFlag.value = false;
    }
  }
};
//页面渲染模板
onMounted(() => {
  if (router.params.isSelected) {
    isSelected.value = router.params.isSelected;
    info.value.orderStatus = 4;
    info.value.currentPage = 1;
  }
  tabbarStore.setSelected(2);
  loading.value = true;
  getList(0);
  getCommerList(0);

});
</script>
<style lang="scss">
.order-container {
  height: 100%;
  display: flex;
  flex-direction: column;

  .order-header-box {
    background-color: #ffff;
    // width: 100%;
    display: flex;
    height: 80px;
    line-height: 80px;
    padding: 8px;
    align-items: center;

    .item {
      flex: 1;
      height: 80px;
      text-align: center;
      font-size: 26px;
      border-radius: 30px;
      transition: all 0.3s ease;
    }

    .active {
      background-color: #f7f7f7;
      font-size: 28px;
      color: #000;
    }
  }

  .my-order-list {
    overflow: hidden;
    padding: 0 10px;
    flex: 1;
    height: 100%;
    padding-bottom: 180px;
    border-radius: 15px;

    .flex-container {
      padding: 20px;
      height: 100%;

      .scroll-list {
        // height: 100%;
        height: 100%;

        .flex-item:last-child {
          margin-bottom: 100px;
        }

        .flex-item {
          background-color: #fff;
          margin-top: 15px;
          border-radius: 15px;
        }

        .flex-item:nth-child(n + 2) {
          margin-top: 15px;
        }
      }
    }
  }
}
</style>
